<template>
  <div class="addVolunteer">
    <!--加入志愿者-->
    <content-header :title="routeItem.title"></content-header>

    <!--步骤指示-->
    <el-steps :active="step" simple class="xui-margin-top-sm">
      <el-step title="阅读报名须知" icon="el-icon-document"></el-step>
      <el-step title="填写报名表" icon="el-icon-edit"></el-step>
      <el-step title="填写调查问卷" icon="el-icon-edit-outline"></el-step>
    </el-steps>

    <!-- step1:报名须知 -->
    <div v-if="step == 0">
      <h4 class="xui-margin-top xui-text-center">{{notice.title}}</h4>
      <el-carousel :interval="5000" arrow="always" height="450px">
        <el-carousel-item>
          <div class="carousel-img">
            <img src="../../../assets/images/volunteer/1.jpg" />
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-img">
            <img src="../../../assets/images/volunteer/2.jpg" />
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-img">
            <img src="../../../assets/images/volunteer/3.jpg" />
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-img">
            <img src="../../../assets/images/volunteer/4.jpg" />
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-img">
            <img src="../../../assets/images/volunteer/5.jpg" />
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="xui-padding-horizontal-xxl" v-html="notice.content">

      </div>


      <div class="xui-text-center xui-margin-top">
        <el-button v-if="userId" type="primary" @click="start" class="xui-padding-horizontal-xxl"> 在线报名 </el-button>
        <el-button v-else type="primary" @click="$store.dispatch('ToggleLoginDialog',true)" class="xui-padding-horizontal-xxl">
          登录报名 </el-button>
      </div>
    </div>

    <!-- step2:长沙博物馆志愿者报名表 -->
    <div v-if="step == 1" class="form-group xui-padding-lg xui-margin-top">
      <h2 class="xui-text-center">长沙博物馆志愿者报名表</h2>
      <div class="title xui-margin-vertical-sm">
        <span class="xui-margin-left-sm">请如实填写以上资料。对于资料不全者，我馆将不录入其个人信息</span>
      </div>
      <el-form ref="form1" :inline="false" :rules="rules1" :model="form1" class="demo-form-inline" size="mini"
        label-width="150px">
        <div class="xui-fc">
          <div class="xui-grid-box ">
            <div class="xui-grid-equal-6 ">
              <el-form-item label="姓名：" prop="vname">
                <el-input v-model="form1.vname"></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="sex">
                <el-radio-group v-model="form1.sex">
                  <el-radio label="男" value="男"></el-radio>
                  <el-radio label="女" value="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="民族：" prop="nation">
                <el-input v-model="form1.nation"></el-input>
              </el-form-item>
              <el-form-item label="出生年月：" prop="birthday">
                <el-col>
                  <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form1.birthday" style="width: 100%;">
                  </el-date-picker>
                </el-col>
              </el-form-item>
            </div>
            <div class="xui-grid-equal-6 ">
              <!-- 上传志愿者头像 -->
              <el-form-item label="上传头像：" prop="uploadimg">
                <el-col>
                  <input type="file" @change="uploadPhoto($event)" id="inputiamge" accept="image/png, image/jpeg">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <!-- </input> -->
                </el-col>
              </el-form-item>


            </div>
          </div>

        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="政治面貌：" prop="politicalstatus">
              <el-input v-model="form1.politicalstatus"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="籍贯：" prop="nativeplace">
              <el-input v-model="form1.nativeplace"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="身高：" prop="height">
              <el-input v-model="form1.height"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="学历：" prop="education">
              <el-select v-model="form1.education" placeholder="请选择学历" style="width:100%">
                <el-option label="小学" value="小学"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="专科" value="专科"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="毕业时间：" prop="graduationtime">
              <el-col>
                <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form1.graduationtime" style="width: 100%;">
                </el-date-picker>
              </el-col>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="毕业院校及专业：" prop="schoolmajor">
              <el-input v-model="form1.schoolmajor"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="电话：" prop="phone">
              <el-input v-model="form1.phone"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="form1.email"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="工作单位：" prop="workunit">
              <el-input v-model="form1.workunit"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="特长爱好：" prop="hobby">
              <el-input v-model="form1.hobby"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="健康状况：" prop="health">
              <el-input v-model="form1.health"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="紧急联系人电话：" prop="jinjiphone">
              <el-input v-model="form1.jinjiphone"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item label="家庭住址：" prop="address">
              <el-input v-model="form1.address"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item label="个人简介：" prop="personsummary">
              <el-input v-model="form1.personsummary"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item label="志愿加入服务类型：" prop="vservicetype">
              <el-radio-group v-model="form1.vservicetype" class="xui-padding-left-sm">
                <el-radio label="展览讲解" value="man"></el-radio>
                <el-radio label="资讯导览" value="female"></el-radio>
                <el-radio label="典藏研究" value="man"></el-radio>
                <el-radio label="公共教育" value="female"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item label="拟服务时间：" prop="serverTime">
              <el-checkbox-group v-model="form1.serverTime" class="xui-padding-left-sm xui-padding-top-xs c-bg">
                <div>
                  <el-checkbox label="周二上午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周三上午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周四上午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周五上午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周六上午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周日上午" name="serverTime"></el-checkbox>
                </div>
                <div>
                  <el-checkbox label="周二下午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周三下午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周四下午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周五下午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周六下午" name="serverTime"></el-checkbox>
                  <el-checkbox label="周日下午" name="serverTime"></el-checkbox>
                </div>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
        <div class="xui-margin-left-lg">
          <el-checkbox-group v-model="isReal">
            <el-checkbox label="本人保证以上填写的内容真实有效" name="type"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btn xui-margin-top-lg">
          <el-button type="primary" @click="nextStep" :disabled="!isReal">下一步</el-button>
        </div>
      </el-form>
    </div>

    <!-- step:3调查问卷 -->
    <div v-if="step == 2" class="xui-padding-lg question-paper">
      <h2 class="xui-text-center">长沙博物馆志愿者调查问卷</h2>
      <el-form :inline="false" ref="form2" :rules="rules2" :model="form2" label-position="top" class="demo-form-inline"
        size="mini" label-width="0">
        <el-form-item label="1.您是否了解“志愿者”、“志愿服务”的概念？" prop="answerone">
          <el-radio-group v-model="form2.answerone">
            <el-radio label="A">比较了解</el-radio>
            <el-radio label="B">听说过，但不太了解</el-radio>
            <el-radio label="C">不了解</el-radio>
            <el-radio label="D">完全不了解</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="2.您认为志愿者需要具备哪些条件？" prop="answertwo">
          <el-radio-group v-model="form2.answertwo">
            <el-radio label="A">奉献精神</el-radio>
            <el-radio label="B">团队精神</el-radio>
            <el-radio label="C">社会责任感</el-radio>
            <el-radio label="D">政治面貌好</el-radio>
            <el-radio label="E">交流能力强</el-radio>
            <el-radio label="F">专业知识与技能</el-radio>
            <el-radio label="G">外形条件好</el-radio>
            <el-radio label="H">其他</el-radio>
          </el-radio-group>
          <el-input v-if="form2.answertwo == 'H'" v-model="form2.answertwoother" placeholder="其他"></el-input>
        </el-form-item>

        <el-form-item label="3.以前是否参加过志愿服务？" prop="answerthreea">
          <el-radio-group v-model="form2.answerthreea">
            <el-radio label="是">是</el-radio>
            <el-radio label="否">否</el-radio>
          </el-radio-group>
          <div v-if="form2.answerthreea == '是'" class="xui-grid-avg-2 xui-margin-top-xs">
            <div class="xui-padding-horizontal-sm">
              <span class="color-darken-gray">具体服务项目名称:</span>
              <el-input v-model="form2.answerthreeb" placeholder="项目名称"></el-input>
            </div>
            <div class="xui-padding-horizontal-sm">
              <span class="color-darken-gray">服务内容:</span>
              <el-input v-model="form2.answerthreec" placeholder="服务内容"></el-input>
            </div>
            <div class="xui-padding-horizontal-sm xui-margin-top-xs">
              <p class="color-darken-gray">服务时间:</p>
              <el-date-picker value-format="yyyy-MM-dd" v-model="form2.answerthreed" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%">
              </el-date-picker>
            </div>
            <div class="xui-padding-horizontal-sm xui-margin-top-xs">
              <span class="color-darken-gray">参加志愿服务的收获:</span>
              <el-input v-model="form2.answerthreee" placeholder="收获"></el-input>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="4.您为什么要加入长沙博物馆志愿者队伍（可以多选）" prop="answerfour">
          <el-checkbox-group v-model="form2.answerfour">
            <el-checkbox label="A">对博物馆感兴趣，喜欢博物馆工作氛围</el-checkbox>
            <el-checkbox label="B">获得实践锻炼的机会</el-checkbox>
            <el-checkbox label="C">提高交流沟通能力</el-checkbox>
            <el-checkbox label="D">学习历史文化知识</el-checkbox>
            <el-checkbox label="E">打发时间，充实自我</el-checkbox>
            <el-checkbox label="F">实现人生价值</el-checkbox>
            <el-checkbox label="G">被要求的</el-checkbox>
            <el-checkbox label="H">帮助他人，服务社会</el-checkbox>
            <el-checkbox label="I">结交新朋友</el-checkbox>
            <el-checkbox label="J">活得心灵的快乐和满足</el-checkbox>
            <el-checkbox label="K">发挥专业特长</el-checkbox>
            <el-checkbox label="L">其他</el-checkbox>
          </el-checkbox-group>
          <el-input v-if="form2.answerfour == 'L'" v-model="form2.answerfourother" placeholder="其他"></el-input>
        </el-form-item>

        <el-form-item label="5、您希望在长沙博物馆志愿服务期间获得何种保障?" prop="answerfive">
          <el-input v-model="form2.answerfive" placeholder="填写您希望在长沙博物馆志愿服务期间获得何种保障"></el-input>
        </el-form-item>

        <el-form-item label="6、您希望全心投入多长服务时间?" prop="answersix">
          <el-radio-group v-model="form2.answersix">
            <el-radio label="A">1年</el-radio>
            <el-radio label="B">2年</el-radio>
            <el-radio label="C">3年</el-radio>
            <el-radio label="D">3年以上</el-radio>
            <el-radio label="E">其他</el-radio>
          </el-radio-group>
          <el-input v-if="form2.answersix == 'E'" v-model="form2.answersixother" placeholder="其他"></el-input>
        </el-form-item>

        <el-form-item label="7、您希望志愿服务的时间如何安排？" prop="answerseven">
          <el-radio-group v-model="form2.answerseven">
            <el-radio label="A">按周</el-radio>
            <el-radio label="B">按天</el-radio>
            <el-radio label="C">按月度</el-radio>
            <el-radio label="D">其他</el-radio>
          </el-radio-group>
          <div v-if="form2.answerseven == 'A'" class="xui-padding-horizontal-sm xui-margin-left">
            <span class="color-darken-gray">每周服务天数:</span>
            <el-input style="width:200px" v-model="form2.answersevena" placeholder="每周服务天数"></el-input>
          </div>
          <div v-if="form2.answerseven == 'B'" class="xui-padding-horizontal-sm xui-margin-left">
            <span class="color-darken-gray">每天服务小时:</span>
            <el-input style="width:200px" v-model="form2.answersevenb" placeholder="每周服务小时"></el-input>
          </div>
          <div v-if="form2.answerseven == 'C'" class="xui-padding-horizontal-sm xui-margin-left">
            <span class="color-darken-gray">每月服务天数:</span>
            <el-input style="width:200px" v-model="form2.answersevena" placeholder="每月服务天数"></el-input>
          </div>
          <div v-if="form2.answerseven == 'D'" class="xui-padding-horizontal-sm xui-margin-left">
            <span class="color-darken-gray">其他:</span>
            <el-input style="width:200px" v-model="form2.answersevena" placeholder="其他"></el-input>
          </div>
        </el-form-item>

        <el-form-item label="8.您觉得自己在正式从事志愿服务前，还需经过哪些培训?" prop="answereight">
          <el-radio-group v-model="form2.answereight">
            <el-radio label="A">专业知识培训</el-radio>
            <el-radio label="B">服务礼仪培训</el-radio>
            <el-radio label="C">工作规程</el-radio>
            <el-radio label="D">职业与道德规范</el-radio>
            <el-radio label="E">不需要什么培训</el-radio>
            <el-radio label="F">其他</el-radio>
          </el-radio-group>
          <el-input v-if="form2.answereight == 'F'" v-model="form2.answereightother" placeholder="其他"></el-input>
        </el-form-item>

        <el-form-item label="9.您对我馆的志愿者活动有何建议和意见？">
          <el-input v-model="form2.answernine" placeholder="您的建议与意见"></el-input>
        </el-form-item>

        <div class="btn xui-margin-top-lg">
          <el-button type="primary" @click="submit" v-loading="loading" :disabled="disabled">提交问卷并申请志愿者</el-button>
        </div>
      </el-form>
    </div>

    <!--step4:报名成功-->
    <div v-if="step == 3">
      <h4 class="xui-text-center color-green xui-margin-top">
        <i class="el-icon-success"></i>
        报名成功
      </h4>
      <p class="xui-text-center color-green">请耐心等待，我们将与您联系。</p>
      <div class="xui-text-center xui-margin-top">
        <el-button @click="gotoBegining" type="primary">继续报名</el-button>
      </div>
    </div>


  </div>
</template>

<script>
  import ContentHeader from "../../../components/widge/content-header";
  import {
    applyVolunteer
  } from "@/api/interact";
  import {
    getList
  } from "@/api/list";

  export default {
    components: {
      ContentHeader
    },
    data() {
      return {
        imageUrl: require(`../../../assets/images/portrait.jpg`),
        // imageUrl: require(`../../assets/images/round-${index +
        // 1}.png`),
        headers: {
          // "Access-Control-Allow-Origin": "*"
          "Content-Type": "multipart/form-data"
        },
        isReal: false,
        notice_pics: [{
            id: 1,
            img: "/assets/images/volunteer/1.jpg"
          },
          {
            id: 2,
            img: "/assets/images/volunteer/2.jpg"
          },
          {
            id: 3,
            img: "/assets/images/volunteer/3.jpg"
          },
          {
            id: 4,
            img: "/assets/images/volunteer/4.jpg"
          },
          {
            id: 5,
            img: "/assets/images/volunteer/5.jpg"
          }
        ],
        step: 0,
        notice: {
          title: "",
          content: ""
        },
        loading: false,
        disabled: false,
        form1: {
          vname: "",
          sex: "男",
          nation: "",
          birthday: "",
          politicalstatus: "",
          nativeplace: "",
          height: "",
          education: "",
          graduationtime: "",
          schoolmajor: "",
          phone: "",
          email: "",
          workunit: "",
          hobby: "",
          health: "",
          jinjiphone: "",
          address: "",
          personsummary: "",
          vservicetype: "",
          service: [],
          serverTime: [],
          img: ""
        },
        form2: {
          answerone: "",
          answertwo: "",
          answertwoother: "",
          answerthreea: "",
          answerthreeb: "",
          answerthreec: "",
          answerthreed: "",
          answerthreee: "",
          answerfour: [],
          answerfourother: "",
          answerfive: "",
          answersix: "",
          answersixother: "",
          answerseven: "",
          answersevena: "",
          answersevenb: "",
          answereight: "",
          answereightother: "",
          answernine: ""
        },
        rules1: {
          vname: [{
            required: true,
            trigger: "blur",
            message: "请输入您的名字"
          }],
          sex: [{
            required: true,
            trigger: "change",
            message: "请选择您的性别"
          }],
          nation: [{
            required: true,
            trigger: "blur",
            message: "请输入您的民族"
          }],
          birthday: [{
            required: true,
            message: "请选择出生年月",
            trigger: "change"
          }],
          politicalstatus: [{
            required: true,
            trigger: "blur",
            message: "请输入您的政治面貌"
          }],
          nativeplace: [{
            required: true,
            trigger: "blur",
            message: "请输入您的籍贯"
          }],
          height: [{
            required: true,
            trigger: "blur",
            message: "请输入您的身高"
          }],
          education: [{
            required: true,
            trigger: "change",
            message: "请输入您的学历"
          }],
          graduationtime: [{
            required: true,
            message: "请选择毕业时间",
            trigger: "change"
          }],
          schoolmajor: [{
            required: true,
            trigger: "blur",
            message: "请输入您的毕业院校及专业"
          }],
          phone: [{
              required: true,
              trigger: "blur",
              message: "请输入正确的手机号码"
            },
            {
              trigger: "blur",
              pattern: /^1[3|4|5|6|7|8][0-9]\d{4,8}$/,
              message: "请输入正确的手机号码"
            }
          ],
          email: [{
              required: true,
              trigger: "blur",
              message: "请输入正确的邮箱"
            },
            {
              trigger: "blur",
              pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
              message: "请输入正确的邮箱地址"
            }
          ],
          workunit: [{
            required: true,
            trigger: "blur",
            message: "请输入您的工作单位"
          }],
          hobby: [{
            required: true,
            trigger: "blur",
            message: "请填写您的兴趣爱好"
          }],
          health: [{
            required: true,
            message: "请输入您的健康状况",
            trigger: "blur"
          }],
          jinjiphone: [{
              required: true,
              message: "请输入紧急联系人手机号码",
              trigger: "blur"
            },
            {
              message: "请输入正确的手机号码",
              trigger: "blur",
              pattern: /^1[3|4|5|6|7|8][0-9]\d{4,8}$/
            }
          ],
          address: [{
            required: true,
            trigger: "blur",
            message: "请输入您的家庭住址"
          }],
          personsummary: [{
            required: true,
            trigger: "blur",
            message: "请输入您的个人简介"
          }],
          vservicetype: [{
            required: true,
            message: "请选择志愿加入的服务类型",
            trigger: "change"
          }],
          serverTime: [{
            required: true,
            message: "请选择服务时间",
            trigger: "change"
          }]
        },
        rules2: {
          answerone: [{
            required: true,
            message: "请答第一题",
            trigger: "change"
          }],
          answertwo: [{
            required: true,
            message: "请答第二题",
            trigger: "change"
          }],
          answerthreea: [{
            required: true,
            message: "请答第三题",
            trigger: "change"
          }],
          answerfour: [{
            required: true,
            message: "请答第四题",
            trigger: "change"
          }],
          answerfive: [{
            required: true,
            message: "请答第五题",
            trigger: "change"
          }],
          answersix: [{
            required: true,
            message: "请答第六题",
            trigger: "change"
          }],
          answerseven: [{
            required: true,
            message: "请答第七题",
            trigger: "change"
          }],
          answereight: [{
            required: true,
            message: "请答第八题",
            trigger: "change"
          }]
        }
      };
    },
    computed: {
      routeItem() {
        let routes = this.$store.getters.siteMap;
        let result;
        routes.forEach(route => {
          if (route.children) {
            route.children.forEach(child => {
              if (child.name == this.$route.name) {
                result = child;
              }
            });
          }
        });
        return result;
      },
      submitData() {
        return {
          ...this.form1,
          ...this.form2
        };
      },
      userId() {
        return this.$store.getters.userId;
      }
    },
    methods: {
      //上传头像像

      uploadPhoto(e) {
        // 利用fileReader对象获取file
        var this_ = this;
        var file = e.target.files[0];
        var filesize = file.size;
        var filename = file.name;
        // 2,621,440   2M
        if (filesize > 2101440) {
          // 图片大于2MB

        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {

          // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
          var imgcode = e.target.result;
          var img1 = imgcode.split(",");
          this_.imageUrl = imgcode
          this_.form1.img = img1[1];
          console.log(this_.form1.img);
        }
      },


      //beas64转码
      getBase64Image(img) {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var dataURL = canvas.toDataURL("image/png");

        return dataURL;
        return dataURL.replace("data:image/png;base64,", "");
      },
      main() {
        var this_ = this;
        var img = document.createElement("img");
        img.src = this.imageUrl; //此处自己替换本地图片的地址
        img.onload = function () {
          var data = this_.getBase64Image(img);
          var img1 = data.split(",");
          this_.form1.img = img1[1];
        };
      },
      //上传表单
      submit() {
        alert('提交中')
        this.$refs.form2.validate(valid => {
          if (valid) {
            this.loading = true;
            this.disabled = true;
            this.form2.answerfour = this.form2.answerfour.join(",");
            applyVolunteer(this.submitData)
              .then(res => {
                this.loading = false;
                this.disabled = false;
                if (res.flag == 1) {
                  this.$message({
                    showClose: true,
                    type: "success",
                    message: "报名成功，请耐心等候"
                  });
                  this.step = 3;
                } else if (res.flag == -1) {
                  this.$message({
                    showClose: true,
                    type: "error",
                    message: res.msg
                  });
                }
              })
              .catch(err => {
                this.loading = false;
                this.disabled = false;
              });
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "请按照要求填写信息"
            });
          }
        });
      },
      nextStep() {
        this.$refs.form1.validate(valid => {
          if (valid) {
            if (typeof this.form1.serverTime !== "string") {
              let StringServerTime = this.form1.serverTime.join(",");
              this.form1.serverTime = StringServerTime;
            }
            window.scrollTo(0, 0);
            this.step = 2;
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "请按照提示填写字端"
            });
          }
        });
      },
      start() {
        this.step = 1;
        window.scrollTo(0, 0);
      },

      getNotice() {
        getList(this.routeItem.id).then(res => {
          this.notice = res.data.recordsList[0];
        });
      },
      gotoBegining() {
        this.form1 = {
          img: '',
          vname: "",
          sex: "男",
          nation: "",
          birthday: "",
          politicalstatus: "",
          nativeplace: "",
          height: "",
          education: "",
          graduationtime: "",
          schoolmajor: "",
          phone: "",
          email: "",
          workunit: "",
          hobby: "",
          health: "",
          jinjiphone: "",
          address: "",
          personsummary: "",
          vservicetype: "",
          service: [],
          serverTime: []
        };
        this.form2 = {
          answerone: "",
          answertwo: "",
          answertwoother: "",
          answerthreea: "",
          answerthreeb: "",
          answerthreec: "",
          answerthreed: "",
          answerthreee: "",
          answerfour: [],
          answerfourother: "",
          answerfive: "",
          answersix: "",
          answersixother: "",
          answerseven: "",
          answersevena: "",
          answersevenb: "",
          answereight: "",
          answereightother: "",
          answernine: ""
        };
        this.step = 0;
        console.log(this.form1);
        console.log(this.form2);
      }
    },
    mounted() {
      this.getNotice();
    }
  };

</script>

<style lang="less">
  .carousel-img {
    text-align: center;

    img {
      width: 80%;
    }
  }

  .addVolunteer {
    .question-title {
      font-size: 15px;
      margin-bottom: 3px;
    }

    .title {
      height: 58px;
      line-height: 58px;
      background-color: #f4efd9;
    }

    .title span {
      font-size: 14px;
      color: #e02a29;
    }

    .form-group {
      border: 1px solid #eee;
    }

    .el-form-item {
      width: 100%;
    }

    .c-bg {
      background-color: #fafafa;
    }

    .btn {
      text-align: center;
    }

    .el-button {
      display: inline-block;
      height: 38px;
      font-size: 14px;
    }

    .question-paper {
      background: #f9f9f9;
    }

    .el-checkbox {
      margin-left: 30px;
    }

    .el-radio {
      margin-left: 30px;
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    pointer-events: none
  }

  #inputiamge {
    height: 187px;
    width: 187px;
    position: absolute;
    opacity: 0;
  }

</style>
